<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> {{ props.title }}</template>
    <div>
      <a-form ref="formRefs" :model="form" auto-label-width>
        <a-form-item field="name" label="单位类型：">
          <a-select
            v-model="form.groupId"
            :style="{ width: '320px' }"
            placeholder="请选择单位类型"
          >
            <a-option
              v-for="item in getUnitData"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>
        </a-form-item>
        <a-form-item field="name" label="单位名称：">
          <a-input :style="{ width: '320px' }" v-model="form.name" />
        </a-form-item>
        <a-form-item field="name" label="启用：">
          <a-switch
            v-model="form.isEnable"
            placeholder="请输入单位名称"
            :checked-value="1"
            :unchecked-value="2"
          />
        </a-form-item>
        <a-form-item field="name" label="备注：">
          <a-input
            v-model="form.remark"
            placeholder="请输入备注"
            :style="{ width: '320px' }"
          /> </a-form-item></a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref, watch } from 'vue';
  import {
    GetUnitList,
    PostUnit,
  } from '@/api/inventory-management/material-management/index';

  const getUnitData = ref();
  const getUnitList = async () => {
    const res = await GetUnitList({ page: 1, size: -1, type: 1 });
    getUnitData.value = res.content;
  };
  getUnitList();
  const formRefs = ref();
  const props = withDefaults(
    defineProps<{
      formData: any;
      visible: boolean;
      title: string;
    }>(),
    {
      visible: false,
    }
  );

  let form = ref({
    id: undefined,
    groupId: undefined,
    name: '',
    code: '',
    isDefault: 1,
    isEnable: 1,
    remark: '',
    type: 2,
  });

  const emit = defineEmits(['update:visible', 'addUnitForm']);

  const handleOk = () => {
    emit('addUnitForm', form.value);
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  watchEffect(() => {
    if (modalVisible.value) {
      // form.name = '';

      form.value = cloneDeep(props.formData);
    }
  });
</script>

<style scoped lang="less"></style>
